<form (ngSubmit)="submitForm()" [formGroup]="testForm">
  <h1 mat-dialog-title>{{ 'ldap.test.TITLE' | translate }}</h1>
  <div mat-dialog-content>
    <div class="row">
      <div class="col-6 d-flex align-items-center">
        <mat-form-field appearance="standard" class="w-inherit">
          <mat-label>{{ 'ldap.USERNAME' | translate }}</mat-label>
          <input
            formControlName="username"
            matInput
            required
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
          />
        </mat-form-field>
      </div>
      <div class="col-6 d-flex align-items-center">
        <mat-form-field appearance="standard" class="w-inherit">
          <mat-label>{{ 'ldap.PASSWORD' | translate }}</mat-label>
          <input
            [type]="passwordVisible ? 'text' : 'password'"
            formControlName="password"
            matInput
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
            required />
        </mat-form-field>
        <button
          (click)="passwordVisible = !passwordVisible"
          *ngIf="testForm.controls.password.value"
          aria-label="Visibility icon to toggle password visibility"
          mat-icon-button
          type="button">
          <i class="eos-icons">{{
            passwordVisible ? 'visibility' : 'visibility_off'
          }}</i>
        </button>
      </div>
    </div>
    <mat-progress-bar
      *ngIf="submittingForm && !testFinished"
      mode="indeterminate"></mat-progress-bar>
    <ng-container *ngIf="!submittingForm && !testFinished">
      <span class="d-flex align-items-center my-2">
        <i class="eos-icons text-info mr-2">assignment</i>
        {{ 'ldap.test.NOTE' | translate }}
      </span>
    </ng-container>
    <ng-container *ngIf="submittingForm">
      <span class="d-flex align-items-center my-2">
        <i class="eos-icons text-info mr-2">info</i>
        {{ 'ldap.test.INFO' | translate }}
      </span>
    </ng-container>
    <ng-container *ngIf="testFinished && !errorMessage">
      <span class="d-flex align-items-center my-2">
        <i class="eos-icons text-success mr-2">check</i>
        {{
          (connectedGroups.length
            ? 'ldap.test.SUCCEEDED_GROUP'
            : 'ldap.test.SUCCEEDED'
          ) | translate
        }}
      </span>
      <mat-chip-list>
        <mat-chip *ngFor="let group of connectedGroups">
          {{ group }}
        </mat-chip>
      </mat-chip-list>
    </ng-container>
    <ng-container *ngIf="testFinished && errorMessage">
      <span class="d-flex align-items-center my-2">
        <i class="eos-icons text-danger mr-2">close</i>
        {{ errorMessage }}
      </span>
    </ng-container>
  </div>
  <div class="align-items-center justify-content-end" mat-dialog-actions>
    <button (click)="onNoClick()" mat-stroked-button type="button">
      {{ 'general.CANCEL' | translate }}
    </button>
    <app-loading-button
      [appearance]="'mat-raised-button'"
      [buttonClasses]="'ml-2'"
      [color]="'primary'"
      [disabled]="!testForm.valid || submittingForm"
      [loading]="submittingForm"
      [text]="'ldap.test.CHECK' | translate"
      [type]="'submit'">
    </app-loading-button>
  </div>
</form>
